<template>
  <el-dialog v-model="prop.visible" title="添加标签" width="30%" :close-on-click-modal="false" @close="closeModel">
    <div>
      <p class="header">
        <span>一级分类</span>
        <el-input v-if="inputVisible" v-model="inputValue" size="small" class="input" @blur="handleConfirm" />
        <el-button v-else type="primary" size="small" @click="showInput">
          <el-icon style="vertical-align: middle"><Plus /></el-icon>
          <span style="vertical-align: middle"> 添加 </span>
      </el-button>
      </p>
      <el-tag v-for="tag in tagList" :key="tag.id" @click="clickTag(tag)" class="tags">{{ tag.name }}</el-tag>
    </div>
    <div>
      <p class="header">
        <span>二级分类</span>
        <el-input v-if="inputVisibleChild"  v-model="inputValueChild" size="small" class="input" @blur="handleConfirmChild"/>
        <el-button v-else type="primary" size="small" @click="showInputChild">
          <el-icon style="vertical-align: middle"><Plus /></el-icon>
          <span style="vertical-align: middle"> 添加 </span>
        </el-button>
      </p>
      <el-tag v-for="tag in tagChild" :key="tag.id" class="tags">{{ tag.name }}</el-tag>
    </div>
  </el-dialog>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import { getTags, addTags } from '@/api/book'
import { listToTree } from '@/utils/index.js'
import { Plus } from '@element-plus/icons-vue'
// 接受父组件数据
const prop = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const tagList = ref([])
const tagChild = ref([])
const currenTag = ref({})
// 获取所有标签
const getTagList = async () => {
  const res = await getTags()
  if (res.code === 200) {
    let list = res.data.map((item) => {
      return {
        pid: item.pid.toString(),
        id: item.id.toString(),
        name: item.name,
        label: item.name,
        value: item.id
      }
    })
    tagList.value = listToTree(list)
    tagChild.value = tagList.value[0].children
    currenTag.value = tagList.value[0]
  }
}
const clickTag = (val) => {
  tagChild.value = val.children
  currenTag.value = val
}

// 添加一级标签
const inputVisible = ref(false)
const inputValue = ref('')
const showInput = () => {
  inputVisible.value = true
}
const handleConfirm = () => {
  if (inputValue.value) {
    let param = { pid: 0, name: inputValue.value, leave: 0 }
    addTags(param).then((res) => {
      if (res.code === 200) {
        inputVisible.value = false
        getTagList()
      }
    })
  }
}
// 添加子类
const inputVisibleChild = ref(false)
const inputValueChild = ref('')
const showInputChild = () => {
  inputVisibleChild.value = true
}
const handleConfirmChild = () => {
  if (inputValueChild.value) {
    let param = { pid: currenTag.value.id, name: inputValueChild.value }
    addTags(param).then((res) => {
      if (res.code === 200) {
        inputVisibleChild.value = false
        getTagList()
      }
    })
  }
}

// 向父组件传递事件
const toParent = defineEmits(['closeCurrentModal'])
const closeModel = () => {
  toParent('closeCurrentModal', false)
}
onMounted(() => {
  getTagList()
})
</script>
<style lang="scss" scoped>
.header{
  display: flex;
  align-items: center;
  height: 40px;
  span{
    margin-right: 10px;
  }
}
.tags {
  margin: 10px 15px;
  cursor: pointer;
}
.input {
  width: 180px;
}
</style>
